<template>
  <div class="weekPlan">
    <div class="weekPlan-header">
      <h3>周计划</h3>
      <el-row type="flex">
        <el-col :span="9"></el-col>
        <el-col :span="10">
          <el-form ref="weekPlanForm" :model="weekPlanForm" label-width="80px">
            <el-form-item v-if="currentRole!=3" label="运动项目">
              <el-select v-model="weekPlanForm.sportId" @change="sportChange" filterable clearable placeholder="请选择" style="width: 100%;">
                <el-option :label="item.name" :value="item.sportId" v-for="(item,index) in sportData" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="currentRole!=3" label="运动小项">
              <el-select v-model="weekPlanForm.sportItemId" @change="sportItemChange" filterable clearable placeholder="请选择" style="width: 100%;">
                <el-option :label="item.name" :value="item.sportItemId" v-for="(item,index) in sportItemData" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="currentRole!=3" label="教练员">
              <el-select v-model="weekPlanForm.empId" @change="coachChange" filterable clearable placeholder="请选择" style="width: 100%;">
                <el-option :label="item.name" :value="item.empId" v-for="(item,index) in empData" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年月">
              <div style="display: flex;justify-content: space-between;">
                <el-date-picker
                  v-model="month"
                  align="right"
                  type="month"
                  :clearable="false"
                  @change="pickerChange"
                  placeholder="选择月份">
                </el-date-picker>
                <el-button-group style="display: flex;">
                  <el-button @click='monthPrevious' type="primary" icon="el-icon-arrow-left">上一月</el-button>
                  <el-button @click='monthNext' type="primary">下一月<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-button-group>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="9"></el-col>
      </el-row>
    </div>
    <div class="weekPlan-body">
      <div class="box-card" v-for="(value,key,index) in weekPlanData" :key="index">
        <span class="title">{{key}}</span>
        <div class="week-btn">
          <p>第{{dict_weekName[index+1]}}周</p>
          <div>
            <el-button @click='handleWeek(value[0],key)' size="small" :type="value[0]!='0'?'primary':'warning'" icon="el-icon-view">周计划</el-button>
          </div>
        </div>
        <div class="classPlan">
          <div @click='handleClass(value[0],item,key,index2)' :class="hoverIndex==key+index2?'borderColor':''" v-show="index2!=0" v-for="(item,index2) in value" :key="index2">
            <i v-if="item==0" class="iconfont icon-xing" style="font-size: 90%;"> {{dict_weekName[index2]=='七'?'日':dict_weekName[index2]}}</i>
            <i v-else class="iconfont icon-xingxing" style="font-size: 90%;"> {{dict_weekName[index2]=='七'?'日':dict_weekName[index2]}}</i>
          </div>
        </div>
      </div>
    </div>
    <vxe-modal v-model="printModal" title="预览" height="800" show-zoom resize width="600" show-footer>
      <template #default>
        <weekPlanPrint  id="myPrint" :previewData="previewData" :docClassId="docClassId" />
      </template>
      <template #footer>
        <el-button @click="printEvent" type="primary" icon="el-icon-printer" size="mini">打印</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  import {get_sport_all} from "@/api/dict.js"
  import {meta_sport_item,weekPlanOverView,allType} from "@/api/plan.js"
  import {pcm4emp} from "@/api/person.js"
  import weekPlanPrint from "@/components/print/weekPlanPrint.vue"
  export default {
    components: {
      weekPlanPrint,
    },
    data() {
      return {
        weekPlanForm: {
          sportId: '',
          sportItemId: '',
          empId: '',
        },
        month: new Date(),
        sportData: [],
        sportItemData: [],
        empData: [],
        weekPlanData: {},
        dict_weekName: {
          1:'一',
          2:'二',
          3:'三',
          4:'四',
          5:'五',
          6:'六',
          7:'七'
        },
        hoverIndex: '',
        previewData: {},
        printModal: false,
        docClassId: 33,
        currentRole: '',
      }
    },
    created() {
      let month = window.localStorage.getItem('weekPlan-month')
      if(month) {
        this.month = month
      }
      this.currentRole = window.sessionStorage.getItem('roleId') % 14
      this.getSportAll()
      if(this.currentRole==3){
        this.coachChange()
      }
    },
    computed: {
      docmentVisibility() {
        return this.$store.state.app.docmentVisibility;
      },
    },
    watch: {
      month(newValue, oldValue) {
        if(!newValue){
          this.month = new Date()
        }
      },
      docmentVisibility(newVal) {
        if (!newVal) return;
        this.coachChange()
      },
    },
    methods: {
      pickerChange() {
        this.coachChange()
      },
      printEvent() {
        const divEl = document.getElementById('myPrint')
        this.$XPrint({
          sheetName: '',
          content: divEl.innerHTML
        })
      },
      handleClass(weekDataId,docDataId,key,i) {
        this.hoverIndex = key+i
        if(this.currentRole!=2){
          if(docDataId==0){
            if(weekDataId==0){
              this.$message.warning('还没有创建该周的周计划！')
              return
            }
            // 课时计划新建
            let currentDate = new Date(key.split('至')[0])
            currentDate.setDate(currentDate.getDate() + i-1)
            let openDate = this.$moment(currentDate).format('YYYY-MM-DD')
            const { href } = this.$router.resolve({
                path: '/classPlanCreateAndPreview',
                query: {openDate:openDate,parentId:weekDataId}
            });
            window.open(href, '_blank');
          }else{
            // 课时计划查看
            const { href } = this.$router.resolve({
                path: '/classPlanCreateAndPreview',
                query: {docDataId:docDataId,parentId:weekDataId}
            });
            window.open(href, '_blank');
          }
        }else{
          if(weekDataId==0){
            this.$message.warning('还没有创建该周的周计划！')
          }else if(docDataId==0){
            this.$message.warning('该课时计划未创建！')
          }else{
            allType({docDataId:docDataId,docClassId:34}).then(res=>{
              if(res.code === 200) {
                this.docClassId = 34
                this.previewData = res.data
                this.printModal = true
              }else{
                this.$message.error(res.message)
              }
            })
          }
        }
      },
      handleWeek(docDataId,key) {
        if(this.currentRole!=2){
          if(docDataId==0){
            // 周计划新建
            const { href } = this.$router.resolve({
                path: '/weekPlanCreateAndPreview',
                query: {openDate:key}
            });
            window.open(href, '_blank');
          }else{
            // 周计划查看
            const { href } = this.$router.resolve({
                path: '/weekPlanCreateAndPreview',
                query: {docDataId:docDataId}
            });
            window.open(href, '_blank');
          }
        }else{
          if(docDataId==0){
            this.$message.warning('该周计划未创建！')
          }else{
            allType({docDataId:docDataId,docClassId:33}).then(res=>{
              if(res.code === 200) {
                this.docClassId = 33
                this.previewData = res.data
                this.printModal = true
              }else{
                this.$message.error(res.message)
              }
            })
          }
        }
      },
      monthPrevious() {
        let currentDate = new Date(this.month)
        currentDate.setMonth(currentDate.getMonth() - 1)
        this.month = this.$moment(currentDate).format('YYYY-MM')
        this.coachChange()
      },
      monthNext() {
        let currentDate = new Date(this.month)
        currentDate.setMonth(currentDate.getMonth() + 1)
        this.month = this.$moment(currentDate).format('YYYY-MM')
        this.coachChange()
      },
      getSportAll() {
        get_sport_all(true).then(res=>{
          this.sportData = res
        })
      },
      sportChange(val) {
        this.weekPlanForm.sportItemId = ''
        this.weekPlanForm.empId = ''
        meta_sport_item(val).then(res=>{
          this.sportItemData = res.data
        }).then(()=>{
          pcm4emp({sportId:val}).then(res=>{
            this.empData = res.data
          })
        })
      },
      sportItemChange(val) {
        this.weekPlanForm.empId = ''
        pcm4emp({sportId:this.weekPlanForm.sportId,sportItemId:val}).then(res=>{
          this.empData = res.data
        })
      },
      coachChange(val) {
        window.localStorage.setItem('weekPlan-month',new Date(this.month))
        let data = {}
        let date = this.$moment(this.month).format('YYYY-MM');
        let year = parseInt(date.split('-')[0]);
        let month = parseInt(date.split('-')[1]);
        let start = new Date(year, month - 1, 1);
        let end = new Date(year, month, 0);
        let weekStart = start.getDay();
        let weekEnd = end.getDay();
        weekStart == 0 ? weekStart = 7 : weekStart = weekStart;
        weekEnd == 0 ? weekEnd = 7 : weekEnd = weekEnd;
        let dayPre = weekStart - 1;
        let dayDelay = 7 - weekEnd;

        let vStart = new Date(start.setDate(start.getDate() - dayPre));
        let vEnd = new Date(end.setDate(end.getDate() + dayDelay));

        data.viewStart = vStart.getFullYear() + "-" + (vStart.getMonth() + 1) + '-' + vStart.getDate() + " 00:00:00";
        data.viewEnd = vEnd.getFullYear() + "-" + (vEnd.getMonth() + 1) + '-' + vEnd.getDate() + " 00:00:00";

        if(this.currentRole==3){
          data.empId = 0
        }else{
          if(this.weekPlanForm.empId){
            data.empId = val || this.weekPlanForm.empId
          }else{
            this.$message.warning('请先选择教练员')
            return
          }
        }
        weekPlanOverView(data).then(res=>{
          if(res.code === 200){
            this.weekPlanData = res.data
          }else{
            this.$message.error(res.message)
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .weekPlan{
    .weekPlan-header{
      background-color: #f6f6f6;
      h3{
        text-align: center;
      }
    }
    .weekPlan-body{
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 20px;
      .box-card{
        width: 48%;
        margin-bottom: 30px;
        background-color: #f6f6f6;
        box-sizing: border-box;
        padding-top: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px 5px #e8e8e8;
        .title{
          height: 30px;
          line-height: 30px;
          font-size: 130%;
          padding: 20px;
        }
        .week-btn{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 20px;
        }
        .classPlan{
          height: 30px;
          line-height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #0C9776;
          cursor: pointer;
          padding: 20px 0;
          overflow: hidden;
          div{
            text-align: center;
            border-top: 3px solid #dddddd;
            width: 14.5%;

            &:hover{
              border-top: 3px solid #0C9776;
            }
          }
          .borderColor{
            border-top: 3px solid #0C9776;
            background-color: #ffffff;
          }
        }
      }
    }
  }
</style>
